<template>
  <basic-container>
    <!-- START goBack -->
    <div class="el-page-header haruyuki-mb-20">
      <div class="haruyuki-page-header-left haruyuki-size-18" @click="goBack">
        <i class="el-icon-arrow-left"></i>
        <div class="haruyuki-size-16">返回</div>
      </div>
      <div class="el-page-header__content">商户会员详情</div>
    </div>
    <div class="haruyuki-content">
      <div class="merchant-box adaptive mer-m-b-8">
        <div class="merchant-item-content">
          <div class="haruyuki-flex haruyuki-flex1">
            <img
              src="/img/member/mermber_tag.png"
              class="merchant-item-img mer-m-b-8"
              style="margin-top: -6px;"
              alt=""
            />
            <div
              class="haruyuki-flex haruyuki-flex-column"
              style="margin-left: 20px"
            >
              <span class="merchant-title">{{
                memberData.memberName
                  ? memberData.memberName
                  : memberData.mobile
              }}</span>
              <span>会员编号：{{ memberData.rpiMemberNo }}</span>
              <span>注册日期：{{ memberData.createTime }}</span>
            </div>
          </div>
        </div>
        <div class="merchant-item-content">
          <span>会员类型：{{ memberData.rpiMemberTypeName }}</span>
          <span>会员等级：{{ memberData.memberLevelName }}</span>
          <span>会员状态：{{ memberData.rpiMemberStatusName }}</span>
        </div>
        <div class="merchant-item-content">
          <span>联系方式：{{ memberData.mobile }}</span>
          <span>所属商户：{{ memberData.rpiName }}</span>
          <span>服务商：{{ memberData.serviceName }}</span>
        </div>
      </div>
      <el-row :gutter="12">
        <el-col :span="8">
          <el-card shadow="hover">
            <p>积分余额</p>
            <p>{{ memberData.score }}元</p>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <p>储值余额</p>
            <p>{{ memberData.balance }}元</p>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <p>优惠券</p>
            <p>{{ memberData.ticketCount }}张</p>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div>
      <avue-tabs :option="tabsOption" @change="handleChange"></avue-tabs>
      <!-- <template v-if="tabsType.prop === '1'">
        <member :data="memberData"></member>
      </template> -->
      <template v-if="tabsType.prop === '1'">
        <recharge :rpiMemberNo="memberData.rpiMemberNo"></recharge>
      </template>
      <template v-else-if="tabsType.prop === '2'">
        <trade :rpiMemberNo="memberData.rpiMemberNo"></trade>
      </template>
      <template v-else-if="tabsType.prop === '3'">
        <coupon :rpiMemberNo="memberData.rpiMemberNo"></coupon>
      </template>
      <template v-else-if="tabsType.prop === '4'">
        <coupon-record :rpiMemberNo="memberData.rpiMemberNo"></coupon-record>
      </template>
    </div>
    <!-- END goBack -->
    <service-details :service-id="serviceId" />
  </basic-container>
</template>

<script>
import { getDetail } from "@/api/rb-core/rpiMemberOem/rpi_member_oem";
// import member from "./components/details/member";
import recharge from "./components/details/recharge";
import trade from "./components/details/trade";
import coupon from "./components/details/coupon";
import couponRecord from "./components/details/coupon-record";

export default {
  components: {
    // member,
    recharge,
    trade,
    coupon,
    couponRecord,
  },
  data() {
    return {
      rpiMemberNo: "",
      memberData: {},
      serviceId: this.$route.query.id,
      tabsType: {},
      tabsOption: {
        column: [
          // {
          //   label: "会员信息",
          //   prop: "1",
          // },
          {
            label: "储值记录",
            prop: "1",
          },
          {
            label: "消费记录",
            prop: "2",
          },
          {
            label: "优惠券",
            prop: "3",
          },
          {
            label: "优惠券记录",
            prop: "4",
          },
        ],
      },
    };
  },
  watch: {
    "$route.query.d": {
      handler(val) {
        if (val) {
          const param = JSON.parse(this.$crypto.decrypt(val));
          const { rpiMemberNo } = param;
          this.rpiMemberNo = rpiMemberNo;
          this.getInfoDetails(this.rpiMemberNo);
        }
      },
      immediate: true,
    },
  },
  created() {
    this.tabsType = this.tabsOption.column[0];
  },
  mounted() {},
  methods: {
    handleChange(column) {
      this.tabsType = column;
      // this.$message.success(JSON.stringify(column));
    },
    getInfoDetails(rpiMemberNo) {
      getDetail(rpiMemberNo).then((res) => {
        this.memberData = res.data.data;
        console.log(this.memberData, "memberData");
      });
    },
    /* 返回页面 */
    goBack() {
      this.$router.$avueRouter.closeTag();
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.merchant-title {
  font-weight: bold;
  font-size: 18px;
}

.merchant-font-bold {
  font-weight: bold;
}

.merchant-box {
  display: flex;
  // justify-content: space-between;
  flex-wrap: wrap;
  &.adaptive {
    width: 100%;
    margin-left: -10px;
    margin-right: -10px;
  }
  .merchant-item-content {
    display: flex;
    flex-direction: column;
    width: calc(100% / 3);
    margin-top: 6px;
    span {
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 8px;
    }

    .merchant-item-img {
      width: 100px;
      height: 100px;
    }
  }
  .merchant-icon-func {
    width: calc(100% / 5);
    margin-bottom: 20px;
    text-align: center;
    .cursor {
      cursor: pointer;
    }
  }
  .merchant-icon-card {
    width: calc(100% / 4);
    .item-card {
      // display: flex;
      border-radius: 10px;
      background-color: #ffffff;
      padding: 20px;
      text-align: center;
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 10px;
      .item-card-label {
        display: flex;
        align-items: center;
      }
      .item-card-content {
        display: flex;
        align-items: center;
        margin-top: 20px;
      }
    }
  }
}

.haruyuki-flex1 {
  flex: 1;
}
.haruyuki-flex-column {
  flex-direction: column;
}
.mer-m-b-8 {
  margin-bottom: 8px;
}
</style>